<template>
  <div v-loading="loading">
    <div class="app-main-tips-box">
      <div class="title">
        <i class="el-icon-warning" /> 预制说明
      </div>
      <ul>
        <li>1.非本系统券不可预制。</li>
        <li>2.可预制的数量最大不可超过卡券的库存，不限库存的卡券不受限制。</li>
        <li>3.预制的券码可以线下印刷不记名派发，扫码即核销。</li>
        <li>4.顾客可以通过兑换的形式重新兑换成电子卡券，兑换成功后券码不会发生变化。</li>
      </ul>
    </div>

    <div class="form-content">
      <el-form ref="form" :model="form" :rules="rules" label-suffix="：" label-width="170px" size="small">
        <el-form-item label="预制类型">
          <el-radio-group v-model="form.type">
            <el-radio label="coupon">预制券</el-radio>
            <el-radio label="card">预制卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="卡券批次号" prop="stockId">
          <el-input
            v-model.trim="form.stockId"
            oninput="if(value.length>9)value=value.slice(0,9)"
            type="number"
            class="app-input-no-num w-400"
            placeholder="请输入批次号"
          />
        </el-form-item>
        <el-form-item label="制作数量" prop="amount">
          <el-input
            v-model.trim="form.amount"
            type="number"
            class="app-input-no-num w-400"
            oninput="if(value.length>4)value=value.slice(0,4)"
            placeholder="请输入（范围1~1000）"
          />
        </el-form-item>
        <el-form-item>
          <el-button round type="primary" @click="openDialogPreDetail">创建预制任务</el-button>
        </el-form-item>
      </el-form>
    </div>

    <DialogPreDetail ref="dialogPreDetail" />
  </div>
</template>

<script>
import DialogPreDetail from './DialogPreDetail'
import { validateCustomPositiveInt } from '@/utils/validate'
import { isNull } from '@/utils'
import { createPreJob } from '../../../api/pre'

export default {
  components: {
    DialogPreDetail
  },
  data() {
    // 校验方法
    const validateAmount = (rule, value, callback) => {
      if (isNull(value)) {
        callback(new Error('请输入数量'))
      } else if (!validateCustomPositiveInt(value, 3, [1000])) {
        callback(new Error('请输入正整数，范围1~1000'))
      } else {
        callback()
      }
    }
    return {
      // 校验字段
      rules: {
        // 批次号
        stockId: [
          {
            required: true,
            message: '请输入批次号',
            trigger: ['blur', 'change']
          }
        ],
        // 数量
        amount: [
          {
            required: true,
            validator: validateAmount,
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      // 状态
      loading: false,
      // 数据
      form: {
        type: 'coupon',
        stockId: null,
        amount: null
      }
    }
  },
  mounted() {

  },
  methods: {
    /**
     * 按钮组
     */
    // 打开详情
    openDialogPreDetail() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.dialogPreDetail.open(this.form).then(res => {
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.w-400 {
  width: 400px;
}

.form-content {
  margin-top: 30px;
}
</style>
